<template>
  <div class="zhu">
    <!-- 用户信息 -->
    <div class="aaaaaaccc">
      <div class="yhxx">
        <!-- 头像 -->
        <div class="tx">
          <van-image
            round
            width="100px"
            height="100px"
            :src="$store.state.userData.img || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
          />
        </div>
        <!-- 信息 -->
        <div class="xx">
          <span style="font-size: 20px">{{$store.state.userData.username}}</span>
          <span style="font-size: 16px">信息：</span>
        </div>
      </div>
      <!-- /详细信息 -->
      <div class="xxxx">
        <van-icon name="arrow" />
      </div>
    </div>

    <!--积分-->
    <div>
        <span>{{this.$store.state.userData.integral||0}}积分</span>
      <van-grid>
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
    </div>

    <!-- 强国城 -->
    <div>
      <span>强国城</span>
      <van-grid>
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
    </div>
    <!-- 强国服务 -->
    <div>
      <span>强国服务</span>
      <van-grid :column-num="4">
        <van-grid-item
          v-for="value in 11"
          :key="value"
          icon="photo-o"
          text="文字"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyVue",
};
</script>

<style scoped>
.zhu{
    display: flex;
    flex-direction: column;
}
.yhxx {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.yhxx > .tx {
  margin: 10px 20px;
}

.yhxx > .xx {
  display: flex;
  flex-direction: column;
}
.aaaaaaccc {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.xxxx {
  margin-right: 10px;
}
</style>